<template>
  <!-- 类型下拉框配置 -->
  <a-drawer
    width="900px"
    :visible="visible"
    :zIndex="style.zIndex"
    title="下拉框配置"
    @close="cancel"
  >
    <div class="eip-drawer-body beauty-scroll">
      <a-form-model
        ref="form"
        :label-col="col.labelCol"
        :wrapper-col="col.wrapperCol"
      >
        <a-form-model-item label="选项">
          <a-checkbox> 默认第一个 </a-checkbox>
          <a-checkbox> 单选 </a-checkbox></a-form-model-item
        >
        <a-form-model-item label="数据源"
          ><a-radio-group
            v-model="config.sourceType"
            @change="sourceTypeChange"
          >
            <a-radio value="dynamic"> 动态数据 </a-radio>
            <a-radio value="customer"> 自定义 </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="数据源" v-if="config.sourceType == 'dynamic'">
          <a-input
            disabled
            placeholder="点击选择设置数据源"
            v-model="config.source"
          >
            <div
              @click="dataSourceClick"
              slot="addonAfter"
              style="cursor: pointer"
            >
              <a-icon type="search" />
            </div>
          </a-input>
        </a-form-model-item>
        <a-form-model-item label="键" v-if="config.sourceType == 'dynamic'">
          <a-select placeholder="请选择类型" v-model="config.sourceKey">
            <a-select-option
              v-for="(item, i) in config.sourceColumns"
              :key="i"
              :value="item.column"
            >
              {{ item.column }} {{ item.description }}
            </a-select-option>
          </a-select></a-form-model-item
        >
        <a-form-model-item label="值" v-if="config.sourceType == 'dynamic'">
          <a-select placeholder="请选择类型" v-model="config.sourceValue">
            <a-select-option
              v-for="(item, i) in config.sourceColumns"
              :key="i"
              :value="item.column"
            >
              {{ item.column }} {{ item.description }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item
          label="排序字段"
          v-if="config.sourceType == 'dynamic'"
        >
          <a-select placeholder="请选择类型" v-model="config.sourceOrder">
            <a-select-option
              v-for="(item, i) in config.sourceColumns"
              :key="i"
              :value="item.column"
            >
              {{ item.column }} {{ item.description }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item
          label="排序方式"
          v-if="config.sourceType == 'dynamic'"
        >
          <a-select placeholder="请选择类型" v-model="config.sourceOrderType">
            <a-select-option value="DESC"> DESC </a-select-option>
            <a-select-option value="ASC"> ASC </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item
          label="数据值"
          v-if="config.sourceType == 'customer'"
        >
          <a-textarea
            v-model="config.format"
            placeholder="格式：选项文本1,选项值1;选项文本2,选项值2（如:1,男;2,女;3未知）"
            :auto-size="{ minRows: 3, maxRows: 5 }"
          />
        </a-form-model-item>
      </a-form-model>
    </div>
    <div class="eip-drawer-toolbar">
      <a-space>
        <a-button key="back" @click="cancel"> 取消 </a-button>
        <a-button key="submit" @click="ok" type="primary"> 确定 </a-button>
      </a-space>
    </div>

    <!-- 数据源选择 -->
    <data-source
      ref="dataSource"
      :visible.sync="data.source.visible"
      @ok="dataSourceOk"
    >
    </data-source>
  </a-drawer>
</template>

<script>
import dataSource from "../data/source";
export default {
  name: "search-select",
  components: {
    dataSource,
  },
  data() {
    return {
      col: {
        labelCol: { span: 2 },
        wrapperCol: { span: 22 },
      },
      style: {
        zIndex: 1030,
      },

      config: {
        isEmpty: true,
        isSingle: true,
        sourceType: "dynamic",

        source: null,
        sourceKey: [],
        sourceValue: [],
        sourceOrder: [],
        sourceOrderType: ["DESC"],

        sourceConfig: null,
        sourceColumns: [],

        format: null,
      },

      data: {
        source: {
          visible: false,
        },
      },
    };
  },

  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },

  methods: {
    /**
     * 取消
     */
    cancel() {
      this.$emit("update:visible", false);
    },

    /**
     * 保存
     */
    ok() {
      this.$emit("ok", this.config);
    },

    /**
     * 数据数据源点击
     */
    dataSourceClick() {
      this.data.source.visible = true;
      this.$refs.dataSource.init(this.config.sourceConfig);
    },

    /**
     * 数据源配置保存
     */
    dataSourceOk(config) {
      this.config.sourceConfig = config;
      switch (config.type) {
        case "table":
          this.config.source = config.table.name;
          this.config.sourceColumns = config.table.columns;
          break;
      }
    },

    /**
     * 下拉数据源改变
     */
    sourceTypeChange(e) {
      this.config.sourceType = e.target.value;
    },

    /**
     * 初始化
     */
    init(config) {
      if (config) {
        this.config = config;
      } else {
        this.config = {
          isEmpty: true,
          isSingle: true,
          sourceType: "dynamic",

          source: null,
          sourceKey: [],
          sourceValue: [],
          sourceOrder: [],
          sourceOrderType: ["DESC"],

          sourceConfig: null,
          sourceColumns: [],

          format: null,
        };
      }
    },
  },
};
</script>

<style lang="less" scoped>
</style>
